<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="个人资料" bg-color="#fff"></TopNav>
		<view class="check-banner progress" v-if="detailData && detailData.status == 0">
			<image src="/static/images/index/check.png" mode=""></image>
			<text>资料正在审核中，请耐心等待。</text>
		</view>
		<view class="check-banner pass" v-else-if="detailData && detailData.status == 1">
			<image src="/static/images/index/pass.png" mode=""></image>
			<text>资料审核通过。</text>
		</view>
		<view class="check-banner reject" v-else-if="detailData && detailData.status == 2">
			<image src="/static/images/index/reject.png" mode=""></image>
			<text>资料审核不通过，请重新提交申请。</text>
		</view>
		<view class="main">
			<view class="f-s20">
				<text>基本资料</text>
			</view>
			<view class="m-t11 m-b18">
				<FormInput title="昵称" placeholder="请输入昵称" v-model="form.nickname"></FormInput>
				<FormSelect title="家乡" placeholder="请选择你的家乡" :value="form.hometown"  class="m-t11" picker-title="请选择你的家乡">
					<template v-slot:default="{data}">
						<CountyPicker v-model="form.hometown" :isConfirm="data"></CountyPicker>
					</template>
				</FormSelect>
				<FormSelect title="学历" placeholder="请选择你的学历" :value="form.qualification" picker-title="请选择学历"
					class="m-t11">
					<EducationPicker v-model="form.qualification"></EducationPicker>
				</FormSelect>
				<FormSelect title="身高/体重" placeholder="请输入身高体重" picker-title="请输入身高体重" :value="heightAndWeight"
					class="m-t11">
					<FormInput title="身高(cm)" placeholder="请输入身高" v-model="form.height" class="m-t11"></FormInput>
					<FormInput title="体重(kg)" placeholder="请输入体重" v-model="form.weight" class="m-t11"
						style="margin-bottom: 56rpx;"></FormInput>
				</FormSelect>
				<FormSelect title="胸围" placeholder="请选择胸围" picker-title="请选择胸围" :value="form.chest" class="m-t11">
					<template v-slot:default="{data}">
						<BustPicker v-model="form.chest" :isConfirm="data"></BustPicker>
					</template>
				</FormSelect>
				<FormSelect title="常去城市" placeholder="请选择常去城市" picker-title="请选择你最常去的城市" :value="form.frequently_citys"
					class="m-t11" picker-subtitle="请选择2-4个城市">
					<CityPicker v-model="form.frequently_citys"></CityPicker>
				</FormSelect>
				<FormSelect title="礼仪接触" placeholder="请选择礼仪接触" :visible.sync="protocolShow"
					:value="replaceStr(form.touch)" class="m-t11" picker-title="可以接受哪种礼仪接触" picker-subtitle="多选">
					<ProtocolPicker v-model="form.touch" @change="handleProtocolChange"></ProtocolPicker>
					<template v-slot:button>
						<view class="self-btn margin-center" hover-class="pressed" style="width: 100%;"
							@click="protocolShow = false">
							<text>确定</text>
						</view>
						<view class="m-t16 m-b13 text-center f-s15" hover-class="pressed" @click="handleProtocolReject">
							<text>拒绝接触</text>
						</view>
					</template>
				</FormSelect>
				<FormSelect title="星座" placeholder="请选择星座" picker-title="请选择星座" :value="form.constellation"
					class="m-t11">
					<ConstellationPicker v-model="form.constellation"></ConstellationPicker>
				</FormSelect>
				<FormInput title="微信号" placeholder="请输入微信号" v-model="form.wx_code" class="m-t11"></FormInput>
				<FormSelect title="是否饮酒" placeholder="是否饮酒" :visible.sync="drinkShow" class="m-t11" :value="form.drink"
					picker-title="可以喝哪种酒" picker-subtitle="多选">
					<DrinkPicker :value="form.drink" @change="handleDrinkChange"></DrinkPicker>
					<template v-slot:button>
						<view class="self-btn margin-center" style="width: 100%;" hover-class="pressed"
							@click="drinkShow = false">
							<text>确定</text>
						</view>
						<view class="m-t16 m-b13 text-center f-s15" @click="handleDrinkReject">
							<text>我不能喝酒</text>
						</view>
					</template>
				</FormSelect>
			<!-- 	<FormSelect title="推广大使邀请码" placeholder="请填写邀请码(非必填)" :value="form.code" picker-title="推广大使邀请码"
					:required="false" class="m-t11">
					<CodePicker v-model="form.code"></CodePicker>
				</FormSelect> -->
			</view>
		</view>
		<view class="fixed-bottom p-lr16" @click="handleConfirm">
			<view class="self-btn full-width" hover-class="pressed">
				<text>重新提交</text>
			</view>
		</view>
		<Toast></Toast>
		<Modal :show.sync="modalShow" title="提示" content="您是否确认重新提交审核？\n如果存在正在审核中数据将被覆盖"
			@confirm="handleModalConfirm">
		</Modal>
	</view>
</template>

<script>
	import Modal from '@/components/modal'
	import UploadImage from '@/components/upload-image'
	import FormSelect from '@/components/form-select'
	import FormInput from '@/components/form-input'
	import CountyPicker from '@/pages/login/components/county-picker.vue'
	import CityPicker from '@/pages/login/components/city-picker.vue'
	import ConstellationPicker from '@/pages/login/components/constellation-picker.vue'
	import BustPicker from '@/pages/login/components/bust-picker.vue'
	import ProtocolPicker from '@/pages/login/components/protocol-picker.vue'
	import EducationPicker from '@/pages/login/components/education-picker.vue'
	import DrinkPicker from '@/pages/login/components/drink-picker.vue'
	import CodePicker from '@/pages/login/components/code-picker.vue'
	import {
		authStepsDetails,
		baseAuth
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		components: {
			Modal,
			UploadImage,
			FormSelect,
			FormInput,
			CountyPicker,
			CityPicker,
			ConstellationPicker,
			BustPicker,
			ProtocolPicker,
			EducationPicker,
			DrinkPicker,
			CodePicker
		},
		data() {
			return {
				modalShow: false,
				detailData: {},
				drinkShow: false, // 饮酒选择
				protocolShow: false, // 礼仪接触选择
				countyCode: null, // 家乡选中值
				countySelect: [], // 家乡选择数组
				form: {
					nickname:"",
					chest: "",
					code: "",
					constellation: "",
					drink: "",
					frequently_citys: "",
					height: "",
					hometown: "",
					qualification: "",
					touch: "",
					weight: "",
					wx_code: ''
				}
			}
		},
		computed: {
			heightAndWeight() {
				let str = ''
				let height = this.form.height
				let weight = this.form.weight
				if (height && weight) {
					str = `${height}cm / ${weight}kg`
				} else if (height) {
					str = `${height}cm / -kg`
				} else if (weight) {
					str = `-cm / ${weight}kg`
				}
				return str
			}
		},
		onLoad() {
			this.getDetail()
		},
		methods: {
			handleModalConfirm(){
				if (!this.validateForm(this.form)) return
				// 搭搭认证（实名认证）
				this.form.cover_online = 2
				this.$modal.loading("正在提交").then(() => {
					baseAuth(this.form).then(res => {
						this.$modal.closeLoading()
						this.getDetail()
						this.$toast(res.msg)
					}).catch(() => this.$modal.closeLoading())
				})
			},
			getDetail() {
				authStepsDetails({
					auth_type: 2
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					this.detailData = auth_detail
					for (let key in this.form) {
						this.form[key] = auth_detail[key]
					}
				})
			},
			handleConfirm() {
				this.modalShow = true
			},
			validateForm(form) {
				// 校验家乡
				if (!form.hometown) {
					this.$toast('请选择家乡');
					return false;
				}

				if (!form.qualification) {
					this.$toast('请选择学历');
					return false;
				}

				if (!form.height) {
					this.$toast('请输入身高');
					return false;
				} else {
					const regex = /^\d+(\.\d+)?$/;
					let result = regex.test(form.height);
					if (!result) {
						this.$toast('身高输入格式错误');
						return false
					}
				}
				if (!form.height) {
					this.$toast('请输入体重');
					return false;
				} else {
					const regex = /^\d+(\.\d+)?$/;
					let result = regex.test(form.height);
					if (!result) {
						this.$toast('体重输入格式错误');
						return false;
					}
				}

				if (!form.chest) {
					this.$toast('请选择胸围');
					return false;
				}
				if (!form.frequently_citys) {
					this.$toast('请选择常去城市');
					return false;
				} else {
					let array = form.frequently_citys.split('/')
					if (array.length < 2) {
						this.$toast('请选择至少2个常去城市');
						return false;
					}
				}

				if (!form.touch) {
					this.$toast('请选择礼仪接触');
					return false;
				}
				if (!form.constellation) {
					this.$toast('请选择星座');
					return false;
				}
				if (!form.wx_code) {
					this.$toast('请输入微信号');
					return false;
				}
				if (!form.drink) {
					this.$toast('请选择是否饮酒');
					return false;
				}
				// 所有校验通过
				return true;
			},
			replaceStr(val) {
				if (val) {
					return val.replace(/,/g, '/')
				}
				return null
			},
			handleDrinkReject(select) {
				this.form.drink = '我不能喝酒'
				this.drinkShow = false
			},
			handleDrinkChange(select) {
				this.form.drink = select.join('/')
			},
			handleProtocolChange(select) {
				this.form.touch = select.join(',')
			},
			handleProtocolReject() {
				this.form.touch = "拒绝接触"
				this.protocolShow = false
			},
			handleEducationChange(select) {
				this.form.qualification = select.join(',')
			},
			handleCountyConfirm() {
				if (this.countySelect.length) {
					this.countyCode = this.countySelect[this.countySelect.length - 1]['code']
				}
			},
			handleCountyChange(select) {
				if (select.length) {
					this.countySelect = select
					this.form.hometown = select.map(item => item.name).join(',')
				}
			}
		}
	}
</script>
<style lang="scss">
	@import '@/common/css/var.scss';
	
	page {
		background-color: #fff;
		@include fixed-bottom;
	}
</style>
<style scoped lang="scss">
.main{
	padding: 24rpx 32rpx 0 32rpx;
}
</style>